<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { luckDrawApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading, allNumber } from '@/utils/public';
  import serachUserid from '@/components/serachUserid/index.vue';
  const formLabelWidth = '160px'
  const dataForm = ref(),
  serachGiftRef = ref();
  const $emit = defineEmits(['updateList'])
  const poolOptions = [
    {type:2,label:'亏损池'},
    {type:3,label:'盈利池'},
  ]
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    pool_type:'',
    poolList:[] as Array<any>
  })
  interface formQuert {
    user_id:number
    pool_id:number
    out_diamond_num:number
  }
  let form = reactive({} as formQuert)
  const formRules = {
    user_id: [{ required: true, message: "请输入用户UUID", trigger: "blur" }],
    pool_id: [{ required: true, message: "请选择礼物池", trigger: "blur" }],
    out_diamond_num: [{ required: true, message: "请输入移除钻石数", trigger: "blur" }],
  }
  const handleSubmit = ()=>{
    if(!action.pool_type) return ToastWarning('请选择礼物池类型')
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const loading = Toastloading()
      await luckDrawApi.wishWheelAddPoolUser(form).then(()=>{
        loading.close()
        ToastSuccess('新增个人礼物池用户成功')
        $emit('updateList')
        closeDialog()
      }).catch(()=>{
        loading.close()
      })
    })
  }
  // 查询个人礼物池列表
  const getPoolList = async()=>{
    const loading = Toastloading()
    const res = await luckDrawApi.wishWheelUserPoolList({
      status:0,
      pool_type:action.pool_type
    })
    loading.close()
    const { data=[] } = res?.data || {}
    action.poolList = data
  }
  const openDialog = ()=> {
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    form = reactive({} as formQuert)
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="10vh"
      class="xm-dialog input-width"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      width="40%"
      title="新增个人礼物池用户">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item :label-width="formLabelWidth" label="礼物池类型">
          <el-select v-model="action.pool_type" @change="getPoolList" placeholder="请选择礼物池类型">
            <el-option
              v-for="(item, index) in poolOptions"
              :key="index"
              :label="item.label"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
        <template v-if="action.pool_type">
          <el-form-item :label-width="formLabelWidth" prop="user_id" label="用户UUID">
            <serachUserid v-model:user_id="form.user_id" />
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" prop="pool_id" label="礼物池">
            <el-select v-model="form.pool_id" placeholder="请选择礼物池">
              <el-option
                v-for="(item, index) in action.poolList"
                :key="index"
                :label="item.pool_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" prop="out_diamond_num" label="移除钻石数">
            <el-input v-model="form.out_diamond_num" type="number" placeholder="请输入移除钻石数"/>
          </el-form-item>
        </template>

      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
